<template>
	<view class="chat-room">
		<u-navbar :border-bottom="false" :title="studentName+title+'('+currentRoom.onlineUsers.count+'人)'" titleWidth='340'></u-navbar>
		<view class="online-avatar-container" v-if="false">
			<view class="online-avatar-item" v-for="(user, key) in currentRoom.onlineUsers.users" :key="key"
				:style="(currentRoom.onlineUsers.users.length-1)===key?'':'transform:translateX('+((currentRoom.onlineUsers.users.length-1-key)*20+20)+'rpx)'">
				<image :src="user.avatar"></image>
			</view>
			<view class="online-count">{{currentRoom.onlineUsers.count}}</view>
		</view>
		<view class="chat-room-container">
			<view class="scroll-view" :style="'background-color: #FAFAFA;min-height: calc(100vh - '+navbarHeight+'px + 10px);padding: 40rpx 0 20rpx 0;'">
				<view class="scroll-view-content">
					<u-loadmore v-show="historyLoadStatus=='loading'" :status="historyLoadStatus" style="padding-bottom: 10px;display: block;" />
					<view class="message-box" v-for="(message, key) in currentRoom.historyMessage" :key="key" :id="'message-box'+ key">
						<view class="message-item" :class="message.senderUserId == currentRoom.currentUser.id?'message-item-self':''">
							<view class="user-name">
								<text class="user-text">{{message && message.senderNickname}}</text>
							</view>
							<image class="user_avatar" :class="message.senderUserId == currentRoom.currentUser.id?'user_avatar_self':''" :src="message.avatar" mode=""></image>
							<view class="user-message" :class="message.senderUserId == currentRoom.currentUser.id ? 'user-message-self':'' ">
								<image v-if="message.senderUserId == currentRoom.currentUser.id" class="popright" src="../../static/images/poprightarrow@2x.png" mode=""></image>
								<image v-else class="popleft" src="../../static/images/popleftarrow@2x.png" mode=""></image>
								<text class="msg_text" style="float: left;">{{message && message.content}}</text>
							</view>
						</view>
					</view>
					<view class="message-box" v-for="(message, key) in currentRoom.messages" :key="key" :id="'message-box'+ key">
						<!-- <view class="acea-row row-center-wrapper" v-if="message.online != undefined" style="padding: 20rpx 0;">
							<text style="color: #dcdcdc;font-size: 26rpx;">
								<text style="color: #1661FF;margin-right: 10rpx;">{{message.senderNickname}}</text>
								{{message.online==1?'加入':'退出'}}了群聊
							</text>
						</view> -->
						<view v-if="message.online != undefined"></view>
						<view v-else class="message-item" :class="message.senderUserId == currentRoom.currentUser.id?'message-item-self':''">
							<view class="user-name">
								<text class="user-text">{{message && message.senderNickname}}</text>
							</view>
							<image class="user_avatar" :class="message.senderUserId == currentRoom.currentUser.id?'user_avatar_self':''" :src="message.avatar" mode=""></image>
							<view class="user-message" :class="message.senderUserId == currentRoom.currentUser.id ? 'user-message-self':'' ">
								<image v-if="message.senderUserId == currentRoom.currentUser.id" class="popright" src="../../static/images/poprightarrow@2x.png" mode=""></image>
								<image v-else class="popleft" src="../../static/images/popleftarrow@2x.png" mode=""></image>
								<text class="msg_text" style="float: left;">{{message && message.content}}</text>
							</view>
						</view>
					</view>
					<view :style="'height: calc(80px + '+iosSafeBottom+'px);'"></view>
				</view>
			</view>
			<view class="chat-room-input" :style="'bottom: '+bottom+'px;'">
				<view style="position: relative;min-width: 100%;" >
					<input class="uni-input" :value="newMessageContent" :disabled="isLoad?false:true" :placeholder="isLoad?'发送消息':'连接中...'" @input="onInputMessage" :adjust-position="false"/>
					<view style="width: 92rpx;height: 92rpx;position: absolute;right: 0;top: 0;" @click="sendMessage(MessageType.CHAT, newMessageContent)">
						<view class="uni-btn" @click="sendMessage(MessageType.CHAT, newMessageContent)">↑</view>
					</view>
				</view>
				<view :style="'height: calc('+iosSafeBottom+'px);'"></view>
				<!-- <view class="upload-image" @click="chooseImage">
					<image src="../../static/images/liaotian-uploadimg.png" mode=""></image>
				</view> -->
				<!-- <image class="heart" @click="sendMessage(MessageType.PROP, Prop.HEART)"
					   src="../../static/images/handle-heart.png"></image>
				<image class="rocket" @click="sendMessage(MessageType.PROP, Prop.ROCKET)"
					   src="../../static/images/rocket.png"></image> -->
			</view>
		</view>
		<view class="show-animation" v-if="propDisplay.play">
			<image class="prop-heart" v-for="(value, key) in 4" :key="key" src="../../static/images/heart.png"
				   v-if="propDisplay.showPropType == Prop.HEART"></image>
			<image class="prop-rocket" src="../../static/images/rocket.png"
				   v-if="propDisplay.showPropType == Prop.ROCKET"></image>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	let goEasy = getApp().globalData.goEasy;
	let pubSub = app.globalData.goEasy.pubsub;
	const im = goEasy.im;
	import moment from "../../utils/moment.js"
	import GoEasy from '../../utils/goeasy-2.0.13.min.js'
	export default {
		data() {
			return {
				navbarHeight:app.globalData.navbarHeight,
				iosSafeBottom:app.globalData.iosSafeBottom,
				roomId:0,
				studentName:'',
				isFirst:true, //是否为首次加载
				isLoad:false, // 是否已连接
				canMove:true,
				canClose: true, // 是否要关闭房间（解决chooseimage触发onHide的bug）
				historyPage:1,
				historyEndTime:Date.parse(Date()), //历史消息结束时间,开始时间:结束时间 - page*24*3600(一天)
				historyLoadStatus:'loadmore',
				lastScrollY:0,
				title: '聊天室',
				bottom:0,
				defaultAvatar:'https://api.xiaoluerp.com/Uploads/images/headimg.png',
				currentRoom: null,
				// 道具展示
				propDisplay: {
					showPropType: 0,
					play: false,
					timer: null
				},
				newMessageContent: "",
				// 道具类型
				Prop: {
					HEART: 0,//桃心
					ROCKET: 1//火箭
				},
				// 消息类型
				MessageType: {
					CHAT: 0,//文字聊天
					PROP: 1//道具
				}
			}
		},
		onLoad(e) {
			console.log(e)
			this.roomId = e.roomId;
			this.studentName = e.studentName
			this.init()
		},
		onShow() {
			console.log('onShow')
			this.canMove = true;
			if(!this.isLoad&&!this.isFirst){
				this.init()
				
			}
		},
		onHide() {
			console.log('onHide')
		},
		beforeDestroy(){
			console.log('beforeDestroy')
			this.canMove = false;
			//断开连接 -断开连接操作放在app.vue中
			// if(this.canClose){
			// 	const that = this;
			// 	goEasy.disconnect({
			// 		onSuccess: function(){
			// 			that.isLoad = false;
			// 			console.log("GoEasy disconnect successfully.")
			// 		},
			// 		onFailed: function(error){
			// 			console.log("Failed to disconnect GoEasy, code:"+error.code+ ",error:"+error.content);
			// 		}
			// 	});
			// }
		},
		mounted() {
			uni.onKeyboardHeightChange(res => {
				// console.log("计算键盘高度",res.height,app.globalData.screenHeight)
				// this.bottom = res.height==0?0:(res.height - 52)
				if(this.bottom < app.globalData.screenHeight/2){
					this.bottom = res.height==0?0:(res.height - 0)
				}
			})
		},
		
		methods: {
			//初始化
			init(){
				//获取数据
				// let roomToken = JSON.parse(options.roomToken);
				// 初始化room
				this.currentRoom = {
					roomId: this.roomId,
					roomName: app.globalData.userInfo.nickname + '老师的聊天室',
					onlineUsers: {
						count: 0,
						users: []
					},
					messages: [],
					historyMessage: [],
					currentUser: {
						id: 'js-'+ app.globalData.userInfo.organ_id + '-' + app.globalData.userInfo.id,
						nickname: app.globalData.userInfo.nickname,
						avatar: app.globalData.baseUrl + app.globalData.userInfo.headimg
					}
				};
				this.historyPage = 1
				this.historyLoadStatus = 'loadmore'
				this.lastScrollY = 0
				// 设置导航标题
				// uni.setNavigationBarTitle({
				// 	title: ''
				// });
				
				// 连接goEasy - 此操作放在app.vue中
				// this.connectGoEasy();
				this.isLoad = true;
				
				//渲染在外部页面监听到的消息->修改为加载一天的历史记录
				this.loadHistory();
				// this.renderMessage();
						  
				// 监听用户上下线
				this.listenUsersOnlineOffline();
						
				// 监听新消息
				this.listenNewMessage();
				
				// 将该聊天室标记已读
				this.messageAsRead();
			},
			// 连接goEasy
			connectGoEasy(){
				let self = this;
				let userData = {
					avatar: this.currentRoom.currentUser.avatar,
					nickname: this.currentRoom.currentUser.nickname
				}
				goEasy.connect({
					id : this.currentRoom.currentUser.id,
					data : userData,
					onSuccess: function(){
						console.log("GoEasy connect successfully.")
						self.isLoad = true;
						self.isFirst = false;
						// 加载在线用户列表
						self.loadOnlineUsers();
						// 加载最后10条消息历史
						// self.loadHistory(); // 默认不加载，留给下拉加载
					},
					onFailed: function(error){
						console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
					},
					onProgress: function(attempts){
						console.log("GoEasy is connecting", attempts);
					}
				});
			},
			// 监听用户上下线
			listenUsersOnlineOffline(){
				let self = this;
				let roomId = this.currentRoom.roomId;
				//im
				var onGroupPresence = function (event) {
					console.log("Group User online/offline event:" + JSON.stringify(event));
					self.currentRoom.onlineUsers.count = event.groupOnlineCount;
					let userData = event.data;
					if (event.action === "join" || event.action === "online") {
						//进入房间
						let userId = event.id;
						let avatar = userData.avatar;
						let nickname = userData.nickname;
						let user = {
							id: userId,
							avatar: avatar,
							nickname: nickname
						};
						//添加新用户
						self.currentRoom.onlineUsers.users.push(user);
						//添加进入房间的消息
						let message = {
							content: " 进入房间",
							senderUserId: userId,
							senderNickname: nickname,
							avatar: avatar,
							type: self.MessageType.CHAT,
							online: 1, //1:在线，2:下线
						};
						console.log("进入房间",message)
						self.currentRoom.messages.push(message);
					} else {
						//退出房间
						self.currentRoom.onlineUsers.users.forEach((user, index) => {
							if (event.id === user.id) {
								// 删除当前聊天室列表中离线的用户
								let offlineUser = self.currentRoom.onlineUsers.users.splice(index, 1);
								let message = {
									content: " 退出房间",
									senderUserId: offlineUser[0].id,
									senderNickname: offlineUser[0].nickname,
									avatar: offlineUser[0].avatar,
									type: self.MessageType.CHAT,
									online: 2, //1:在线，2:下线
								};
								console.log("退出房间",message)
								self.currentRoom.messages.push(message);
							}
						});
					}
					self.scrollToBottom();
				};
				//接收群成员上下线事件
				im.on(GoEasy.IM_EVENT.GROUP_PRESENCE, onGroupPresence);
				//订阅群成员上下线，一次可以订阅多个群
				im.subscribeGroupPresence({
					groupIds:[roomId],
					onSuccess: function () { 
						console.log("Subscribe group presence successfully."); 
					},
					onFailed: function (error) { //连接失败
						console.log("Failed to subscribe group presence, code:" + error.code + " content:" + error.content);
					}        
				});
				//查询群聊在线用户数量
				im.groupOnlineCount({
					groupId:roomId,
					onSuccess: function (result) { 
						self.currentRoom.onlineUsers.count = result.content.onlineCount;
						console.log("Query online group user count successfully, result:\n " + JSON.stringify(result)); 
					},
					onFailed: function (error) { //连接失败
						console.log("Failed to query online group user count, code:" + error.code + " content:" + error.content);
					}
				});
				//im
				
				// pubSub
				// pubSub.subscribePresence({
				// 	channel: roomId,
				// 	onPresence: function (presenceEvents) {
				// 		self.currentRoom.onlineUsers.count = presenceEvents.clientAmount;
				// 		presenceEvents.events.forEach(function (event) {
				// 			let userData = event.data;
				// 			if (event.action === "join" || event.action === "online") {
				// 				//进入房间
				// 				let userId = event.id;
				// 				let avatar = userData.avatar;
				// 				let nickname = userData.nickname;
				// 				let user = {
				// 					id: userId,
				// 					avatar: avatar,
				// 					nickname: nickname
				// 				};
				// 				//添加新用户
				// 				self.currentRoom.onlineUsers.users.push(user);
				// 				//添加进入房间的消息
				// 				let message = {
				// 					content: " 进入房间",
				// 					senderUserId: userId,
				// 					senderNickname: nickname,
				// 					avatar: avatar,
				// 					type: self.MessageType.CHAT,
				// 					online: 1, //1:在线，2:下线
				// 				};
				// 				console.log("进入房间",message)
				// 				self.currentRoom.messages.push(message);
				// 			} else {
				// 				//退出房间
				// 				self.currentRoom.onlineUsers.users.forEach((user, index) => {
				// 					if (event.id === user.id) {
				// 						// 删除当前聊天室列表中离线的用户
				// 						let offlineUser = self.currentRoom.onlineUsers.users.splice(index, 1);
				// 						let message = {
				// 							content: " 退出房间",
				// 							senderUserId: offlineUser[0].id,
				// 							senderNickname: offlineUser[0].nickname,
				// 							avatar: offlineUser[0].avatar,
				// 							type: self.MessageType.CHAT,
				// 							online: 2, //1:在线，2:下线
				// 						};
				// 						console.log("退出房间",message)
				// 						self.currentRoom.messages.push(message);
				// 					}
				// 				});
				// 			}
				// 			self.scrollToBottom();
				// 		});
				// 	},
				// 	onSuccess : function () {
				// 		console.log("用户上下线监听成功")
				// 	},
				// 	onFailed : function (error) {
				// 		if (error.code === 401) {
				// 			console.log("监听用户上下线失败,默认不开通，付费应用，可以在我的应用->查看详情，高级功能里自助开通");
				// 		} else {
				// 			console.log("监听用户上下线失败, code:"+error.code+ ",content:"+error.content);
				// 		}
				// 	}
				// })
				// pubSub
			},
			// 监听新消息
			listenNewMessage(){
				// 监听当前聊天室的消息
				let self = this;
				let roomId = this.currentRoom.roomId;
				// im聊天
				var onGroupMessageReceived = function(message) {
					console.log('接受了'+message.payload.text)
					let messageContent = "";
					let content = JSON.parse(message.payload.text);
					//聊天消息
					if(content.type === self.MessageType.CHAT) {
						messageContent = content.content;
					}
					//道具消息
					if(content.type === self.MessageType.PROP) {
						if (content.content === self.Prop.ROCKET) {
							messageContent = "送出了一枚大火箭";
						}
						if (content.content === self.Prop.HEART) {
							messageContent = "送出了一个大大的比心";
						}
					}
					//添加消息
					let newMessage = {
						content: messageContent,
						senderUserId: content.senderUserId,
						senderNickname: content.senderNickname,
						avatar: content.avatar?content.avatar:this.defaultAvatar,
						type: self.MessageType.CHAT
					};
					self.currentRoom.messages.push(newMessage);
					if (content.type === self.MessageType.PROP) {
						self.propAnimation(parseInt(content.content))
					}
					self.scrollToBottom();
				};
				im.on(GoEasy.IM_EVENT.GROUP_MESSAGE_RECEIVED, onGroupMessageReceived);
				//订阅群消息 - app.vue中订阅
				// var groupIds = [roomId];
				// im.subscribeGroup({
				// 	groupIds:groupIds,
				// 	onSuccess: function () {  //订阅成功
				// 	   console.log("Group message subscribe successfully.");
				// 	   //接收群消息
				// 	},
				// 	onFailed: function (error) { //订阅失败
				// 	   console.log("Failed to subscribe group message, code:" + error.code + " content:" + error.content);
				// 	}
				// });
				// im聊天
				
				// pubSub聊天
				// pubSub.subscribe({
				// 	channel: roomId,
				// 	onMessage : function (message) {
				// 		let messageContent = "";
				// 		let content = JSON.parse(message.content);
				// 		console.log('接受了'+message.content)
				// 		//聊天消息
				// 		if(content.type === self.MessageType.CHAT) {
				// 			messageContent = content.content;
				// 		}
				// 		//道具消息
				// 		if(content.type === self.MessageType.PROP) {
				// 			if (content.content === self.Prop.ROCKET) {
				// 				messageContent = "送出了一枚大火箭";
				// 			}
				// 			if (content.content === self.Prop.HEART) {
				// 				messageContent = "送出了一个大大的比心";
				// 			}
				// 		}
				// 		//添加消息
				// 		let newMessage = {
				// 			content: messageContent,
				// 			senderUserId: content.senderUserId,
				// 			senderNickname: content.senderNickname,
				// 			avatar: content.avatar?content.avatar:'../../static/images/noticeDetail-student-default.png',
				// 			type: self.MessageType.CHAT
				// 		};
				// 		self.currentRoom.messages.push(newMessage);
				// 		if (content.type === self.MessageType.PROP) {
				// 			self.propAnimation(parseInt(content.content))
				// 		}
				// 		self.scrollToBottom();
				// 	},
				// 	onSuccess : function () {
				// 	  console.log("监听新消息成功")
				// 	},
				// 	onFailed : function(error) {
				// 		console.log("订阅消息失败, code:"+error.code+ ",错误信息:"+error.content);
				// 	}
				// })
				// pubSub聊天
			},
			// 加载在线用户列表
			loadOnlineUsers(){
				let self = this;
				let roomId = this.currentRoom.roomId;
				pubSub.hereNow({
					channels : [roomId],
					includeUsers : true,
					distinct : true,
					onSuccess: function (result) {
						let users = [];
						let currentRoomOnlineUsers = result.content.channels[roomId];
						currentRoomOnlineUsers.users.forEach(function (onlineUser) {
							let userData = onlineUser.data;
							let user = {
								id: onlineUser.id,
								nickname: userData.nickname,
								avatar: userData.avatar
							};
							users.push(user);
						});
						self.currentRoom.onlineUsers = {
							users: users,
							count: currentRoomOnlineUsers.clientAmount
						};
					},
					onFailed: function (error) {
						//获取失败
						if(error.code === 401){
							console.log("获取在线用户失败,默认不开通，付费应用，可以在我的应用->查看详情，高级功能里自助开通");
						}else{
							console.log("获取在线用户失败, code:" + error.code + ",错误信息:" + error.content);
						}
					}
				});
			},
			// 加载最后消息历史
			loadHistory(){
				let self = this;
				let roomId = this.currentRoom.roomId;
				self.historyLoadStatus = 'loading';
				pubSub.history({
					channel: roomId, //必需项
					start: self.historyEndTime - self.historyPage*24*3600*1000, 
					end: self.historyEndTime,
					limit: 999, //可选项，返回的消息条数
					onSuccess:function(response){
						// console.log(response.content.messages)
						let messages = [];
						response.content.messages.map(message => {
							// let historyMessage = JSON.parse(message.content);
							// im聊天新增
							let o = JSON.parse(message.content);
							let historyMessage = JSON.parse(o.text);
							// im聊天新增
							//道具消息
							if (historyMessage.type === self.MessageType.PROP) {
								if (historyMessage.content === self.Prop.ROCKET) {
									historyMessage.content = "送出了一枚大火箭";
								}
								if (historyMessage.content === self.Prop.HEART) {
									historyMessage.content = "送出了一个大大的比心";
								}
							}
							//添加消息
							historyMessage.avatar = historyMessage.avatar?historyMessage.avatar:'../../static/images/noticeDetail-student-default.png',
							messages.push(historyMessage);
						});
						self.historyPage++;
						if(messages.length > self.currentRoom.historyMessage.length){
							self.historyLoadStatus = 'loadmore'
						}else{
							// 当此时段没有历史记录，则page++,如果小于1天则再次请求
							if(self.historyPage<=7&&messages.length<=300){
								self.historyLoadStatus = 'loading'
								self.loadHistory()
							}else{
								self.historyLoadStatus = 'nomore'
							}
						}
						self.currentRoom.historyMessage = messages;
						if(self.isFirst){
							self.scrollToBottom();
						}
						self.isFirst = false;
					},
					onFailed: function (error) {
						//获取失败
						if(error.code === 401){
							console.log("获取历史消息失败,默认不开通，付费应用，可以在我的应用->查看详情，高级功能里自助开通");
						}else{
							console.log("获取历史消息失败, code:" + error.code + ",错误信息:" + error.content);
						}
					}
				});
			},
			onInputMessage(event) {//双向绑定消息 兼容
				this.newMessageContent = event.target.value;
			},
			// 发送群消息
			sendMessage(messageType, content) {
				const self = this;
				//发送消息
				if (content === "" && messageType === this.MessageType.CHAT) {
					return;
				}
				let message = {
					avatar: app.globalData.userInfo.headimg?(app.globalData.baseUrl +  app.globalData.userInfo.headimg):this.defaultAvatar,
					senderNickname: this.currentRoom.currentUser.nickname,
					senderUserId: this.currentRoom.currentUser.id,
					type: messageType,
					content: content
				};
				// im聊天
				var textMessage = im.createTextMessage({
					text:JSON.stringify(message), //消息内容
					to: {
						type: GoEasy.IM_SCENE.GROUP,   //私聊还是群聊，私聊为GoEasy.IM_SCENE.PRIVATE
						id: this.currentRoom.roomId,  //群id
						data: message //群信息, 任意格式的字符串或者对象，用于更新会话列表中的群信息conversation.data
					}
				});
				im.sendMessage({
					message:textMessage,
					onSuccess: function (m) {  //发送成功
						self.currentRoom.messages.push(message); //手动push到页面
						self.scrollToBottom(); //去底部
						console.log("Group message sent successfully.", m);
					},
					onFailed: function (error) { //发送失败
						console.log("Failed to send group message, code:"+error.code+ ",error:"+error.content);
					}
				});
				// im聊天
				
				// pubSub聊天
				// pubSub.publish({
				// 	channel : this.currentRoom.roomId,
				// 	message : JSON.stringify(message),
				// 	onSuccess : function () {
				// 		console.log("发送成功");
				// 	},
				// 	onFailed : function (error) {
				// 		console.log("消息发送失败，错误编码：" + error.code + " 错误信息：" + error.content);
				// 	}
				// });
				// pubSub聊天
				this.newMessageContent = "";
			},
			//渲染在外部页面监听到的消息
			renderMessage(){
				let roomId = this.currentRoom.roomId;
				const self = this
				im.latestConversations({
					onSuccess: function (result) {
						console.log(result)
						let f = result.content.conversations.filter(e=>e.groupId == roomId);
						for(let i of f){
							let message = JSON.parse(i.lastMessage.payload.text);
							self.currentRoom.messages.push(message);
						}
					},
					onFailed: function (error) { //获取失败
						console.log("Failed to get the latest conversations, code:" + error.code + " content:" + error.content);
					},
				});
			},
			// 将该聊天室标记已读
			messageAsRead(){
				im.markGroupMessageAsRead({
					groupId: this.currentRoom.roomId,
					onSuccess: function () {//标记成功
						console.log("Marked as read successfully.") 
					},
					onFailed: function (error) { //标记失败
						console.log("Failed to mark as read, code:" + error.code + " content:" + error.content);
					}
				})
			},
			propAnimation(type) {//道具动画
				//动画的实现
				if (this.propDisplay.timer) {
					return;
				}
				this.propDisplay.showPropType = type;
				this.propDisplay.play = true;
				this.propDisplay.timer = setTimeout(() => {
					this.propDisplay.play = false;
					this.propDisplay.timer = null;
				}, 2000)
			},
			async scrollToBottom () {
				this.$nextTick(function(){
					if(this.canMove){
						uni.pageScrollTo({
							scrollTop: 2000000,
							duration : 10
						})
					}
				})
			},
			//选择图片
			// chooseImage(){
			// 	const that = this;
			// 	this.canClose = false
			// 	uni.chooseImage({
			// 	    count: 1,
			// 	    success: function (res) {
			// 			that.canClose = true;
			// 			const im = getApp().globalData.goEasy.im;
			// 			const currentRoom = {
			// 				roomId: 'fj-' + app.globalData.userInfo.id,
			// 				roomName: app.globalData.userInfo.nickname + '老师的聊天室',
			// 				currentUser: {
			// 					id: 'js-' + app.globalData.userInfo.id,
			// 					nickname: app.globalData.userInfo.nickname,
			// 					avatar: app.globalData.baseUrl + app.globalData.userInfo.headimg
			// 				}
			// 			};
			// 			//创建消息
			// 	        let message = im.createImageMessage({
			// 				file:res, //H5获得的图片file对象，Uniapp和小程序调用chooseImage，success时得到的res对象
			// 				to : {
			// 					type : GoEasy.IM_SCENE.GROUP,   //私聊还是群聊，群聊为GoEasy.IM_SCENE.GROUP
			// 					id : currentRoom.roomId,
			// 					data:{
			// 						avatar: currentRoom.currentUser.avatar,
			// 						nickname: currentRoom.currentUser.nickname,
			// 					} //好友扩展数据, 任意格式的字符串或者对象，用于更新会话列表conversation.data
			// 				},
			// 				onProgress: function(event) { console.log('file uploading:', event) } //获取上传进度
			// 			});
			// 			//发送消息
			// 			im.sendMessage({
			// 				message:message,
			// 				onSuccess: function (message) {  //发送成功
			// 					console.log('Message sent successfully.',message);
			// 				},
			// 				onFailed: function (error) { //发送失败
			// 					console.log('Failed to send message，code:' + error.code +',error'+error.content);
			// 				}
			// 			})
			// 	    },
			// 		fail() {
			// 			that.canClose = true;
			// 		}
			// 	});
			// },
		},
		
		onPageScroll(e){
			if(e.scrollTop <= 5&&e.scrollTop<this.lastScrollY&&this.historyLoadStatus=='loadmore'){
				this.loadHistory()
			}
			this.lastScrollY = e.scrollTop
			// console.log(e)
		}
	}
</script>

<style>
	.upload-image{
		position: absolute;
		left: 55rpx;
		bottom: 20rpx;
		width: 48rpx;
		height: 48rpx;
	}
	.upload-image image{
		width: 100%;
		height: 100%;
		display:block;
	}
	.message-item-self{
		text-align: right;
	}
	
	.popright{
		position: absolute;
		right: -10rpx;
		height: 18rpx;
		width: 18rpx;
		margin-top: -10rpx;
	}
	
	.popleft{
		position: absolute;
		left: -14rpx;
		height: 18rpx;
		width: 18rpx;
		margin-top: -10rpx;
	}
	.msg_text{
		line-height: 40rpx;
		font-size: 32rpx;
		margin: 0;
	}
	
	/* 组件自带的css */
	page {
		height: 100%;
	}

	uni-page-body {
		height: 100%;
	}

	.chat-room {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #FAFAFA;
	}

	.online-avatar-container {
		position: fixed;
		right: 0;
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: flex-end;
		padding: 28rpx;
		box-shadow: 10rpx 30rpx 50rpx #fff;
		z-index: 40;
		background: #ffffff;
	}

	.online-avatar-item {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		background: rgba(51, 51, 51, 0.3);
		color: #fff;
		font-size: 18rpx 28rpx;
	}

	.online-count {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		background: rgba(51, 51, 51, 0.3);
		color: #fff;
		font-size: 28rpx;
	}

	.online-avatar-item image {
		width: 80rpx;
		height: 80rpx;
	}

	.chat-room-container {
		padding-top: 0rpx;
	}

	.scroll-view {
		overflow-y: auto;
		/* padding: 20rpx 38rpx 130rpx 38rpx; */
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
	}

	.message-box {
		width: 92%;
		height: auto;
		padding: 0 30rpx;
		position: relative;
		box-sizing: content-box;
	}

	.message-item {
		/* box-sizing: border-box;
		height: 72rpx;
		background-color: rgba(196, 196, 196, 0.2);
		display: inline-block;
		font-size: 28rpx;
		border-radius: 100rpx;
		padding: 18rpx 30rpx;
		font-family: Microsoft YaHei UI; */
	}

	.user-name {
		/* color: #D02129;
		font-family: Microsoft YaHei UI; */
		position: relative;
		bottom: -30rpx;
	}
	
	.user-text{
		margin: auto 100rpx 8rpx;
		font-size: 20rpx;
		color: #dcdcdc;
		display: block;
	}

	.user-message {
		/* color: #333;
		font-family: Microsoft YaHei UI; */
		display: inline-block;
		padding: 20rpx;
		max-width: calc(85% - 80rpx);
		min-height: 40rpx;
		font-size: 24rpx;
		text-align: left;
		word-break: break-all;
		background-color: #fff;
		border-radius: 26rpx;
		position: relative;
		margin-top: 24rpx;
	}
	
	.user-message-self{
		background-color: #0873DE;
		color: #fff;
	}
	
	.user_avatar{
		width: 72rpx;
		height: 72rpx;
		margin: 0 20rpx 0 0;
		border-radius: 6rpx;
		float: left;
	}
	.user_avatar_self{
		float: right;
		margin: 0 0 0 20rpx;
	}

	.chat-room-input {
		width: 100%;
		/* height: 200rpx; */
		position: fixed;
		/* height: 92rpx; */
		line-height: 92rpx;
		padding: 20rpx 28rpx 20rpx 28rpx;
		display: flex;
		background: #ffffff;
		flex-direction: column;
	}

	.uni-input {
		/* width: 528rpx; */
		width: 80%;
		background-color: rgba(51, 51, 51, 0.1);
		height: 92rpx;
		border-radius: 100rpx;
		box-sizing: border-box;
		padding: 26rpx 40rpx;
		font-size: 28rpx;
	}

	.uni-btn {
		position: absolute;
		z-index: 1000;
		width: 72rpx;
		height: 72rpx;
		background: #D02129;
		right: 10rpx;
		top: 10rpx;
		border-radius: 72rpx;
		text-align: center;
		line-height: 72rpx;
		color: #fff;
		font-weight: bold;
		font-size: 32rpx;
	}

	.heart {
		width: 80rpx;
		height: 92rpx;
		padding: 0 15rpx;
	}

	.rocket {
		width: 40rpx;
		height: 92rpx;
	}

	.self {
		color: #D02129;
	}

	.show-animation {
		width: 80rpx;
		height: 320rpx;
		position: fixed;
		z-index: 44;
		left: 50%;
		bottom: 80rpx;
		margin: 0 -40rpx;
		justify-content: flex-end;
		animation: myanimation 2s linear;
	}

	.prop-heart {
		height: 80rpx;
		width: 80rpx;
	}

	.prop-rocket {
		height: 160rpx;
		width: 80rpx;
	}

	@keyframes myanimation {
		from {
			bottom: 80rpx;
		}
		to {
			bottom: 600rpx;
		}
	}

</style>
